<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
    <style>
        * {
        }
    </style>
</head>
<body>

你的爱好：
<ul>
    <li>唱歌</li>
    <li>跳舞</li>
    <li>rap</li>
</ul>
<hr>    
你的兴趣：
<ul>
    <li id="read">读书</li>
    <li id="movie">电影</li>
    <li id="learn">学习</li>
</ul>
<hr>
最近的5年：
<div id="year">
    <p>2022</p>
    <p>2021</p>
    <p>2020</p>
    <p>2019</p>
    <p>2018</p>
</div>
<hr>
<div id="five_year">
    以后的5年：
    <p>2023</p>
    <p>2024</p>
    <p>2025</p>
    <p>2026</p>
    <p>2027</p>
</div>

<script>
    /**
     * 首个元素过滤
     */
    $('li:first').css("color","red")
    /**
     * 最后一个元素过滤
     */
    $('li:last').css("color","green")
    /**
     * 非元素过滤：去处当前的条件过滤
     * 除了学习，其他的都会
     */
    $('li:not(#learn)').css("color","red")

    /**
     * 偶数索引位置过滤
     * 0算在偶数里面
     */
    $('#year p:even').css("font-size","25px")
    /**
     * 奇数索引过滤
     */
    $("#year p:odd").css("color","blue")

    /**
     * 相等索引过滤
     */
    $("#year p:eq(0)").css("font-size","50px")


    /**
     * 小于索引位置
     * lt
     * 左闭右开区间
     */
    $('#five_year p:lt(2)').css("color","red")

    /**
     * 大于索引位置
     */
    $('#five_year p:gt(2)').css("color","green")


</script>

<!--
    总结 ，过滤选择器
    xxxx:伪选择器
    1.首个元素过滤：$('xxxx:first')
    2.最后一个元素过滤：$('xxxx:last')
    3.非元素过滤，不包含该伪元素选择的过滤：$('xxxx:not(xxxx)')
    4.偶数索引过滤，包含了0的哦，格式：$('xxxx:even')
    5.奇数索引过滤，格式：$('xxxx:odd')
    6.索引等于过滤，就是和当前索引相等的元素，格式：$('xxxx:eq(索引值)')
    7.索引小于过滤，小于传入的索引的过滤，格式$('xxxx:lt(索引值)')   注意，没有包括传入的当前索引值
    8.索引大于过滤，大于插入的索引的过滤，格式$('xxxx:gt(索引值)')   注意，没有包括传入的当前索引值
-->
</body>
</html>